<template>
  <div class="simulation-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-left">
        <h1 class="page-title">
          战术方案推演
        </h1>
      </div>
      <div class="header-actions">
        <el-button type="success" icon="VideoPlay">
          开始推演
        </el-button>
        <el-button type="primary" icon="Refresh">
          推演历史
        </el-button>
        <el-button type="primary" icon="Download">
          导出报告
        </el-button>
      </div>
    </div>

    <!-- 统计卡片 -->
    <div class="summary-cards">
      <div class="summary-card">
        <div class="card-content">
          <div class="card-value">186</div>
          <div class="card-label">总推演次数</div>
        </div>
      </div>
      <div class="summary-card">
        <div class="card-content">
          <div class="card-value">165</div>
          <div class="card-label">成功推演</div>
        </div>
      </div>
      <div class="summary-card">
        <div class="card-content">
          <div class="card-value">12分钟</div>
          <div class="card-label">平均耗时</div>
        </div>
      </div>
      <div class="summary-card">
        <div class="card-content">
          <div class="card-value">8</div>
          <div class="card-label">今日推演</div>
        </div>
      </div>
    </div>

    <!-- 图表区域 -->
    <div class="chart-section">
      <div class="chart-card">
        <div class="chart-header">
          <el-icon><DataBoard /></el-icon>
          <span>战术拓扑引用次数统计</span>
        </div>
        <div class="chart-content">
          <div ref="topologyChartRef" class="chart-container"></div>
        </div>
      </div>
      
      <div class="chart-card">
        <div class="chart-header">
          <el-icon><TrendCharts /></el-icon>
          <span>推演成功率趋势</span>
        </div>
        <div class="chart-content">
          <div ref="trendChartRef" class="chart-container"></div>
        </div>
      </div>
    </div>

    <!-- 排行榜区域 -->
    <div class="ranking-section">
      <div class="ranking-card">
        <div class="ranking-header">
          <el-icon><Trophy /></el-icon>
          <span>推演次数排行榜</span>
        </div>
        <div class="ranking-content">
          <div class="ranking-item" v-for="(item, index) in simulationRanking" :key="index">
            <div class="rank-number">{{ index + 1 }}</div>
            <div class="item-info">
              <div class="item-title">{{ item.name }}</div>
              <div class="item-subtitle">{{ item.topology }} • 成功率 {{ item.successRate }}%</div>
            </div>
            <div class="item-count">{{ item.count }}次</div>
          </div>
        </div>
      </div>
      
      <div class="ranking-card">
        <div class="ranking-header">
          <el-icon><Aim /></el-icon>
          <span>拓扑使用频率排行</span>
        </div>
        <div class="ranking-content">
          <div class="ranking-item" v-for="(item, index) in topologyRanking" :key="index">
            <div class="rank-number">{{ index + 1 }}</div>
            <div class="item-info">
              <div class="item-title">{{ item.name }}</div>
              <div class="item-subtitle">{{ item.devices }}个设备 • {{ item.connections }}个连接</div>
            </div>
            <div class="item-count">{{ item.count }}次</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 当前推演状态 -->
    <div class="status-section">
      <el-card class="status-card">
        <template #header>
          <div class="status-header">
            <span>当前推演状态</span>
            <div class="status-controls">
              <el-button :icon="Refresh" circle size="small" />
              <el-button type="primary" size="small">
                筛选
                <el-icon><ArrowDown /></el-icon>
              </el-button>
            </div>
          </div>
        </template>
        
        <div class="status-content">
          <div class="status-item" v-for="(item, index) in currentSimulations" :key="index">
            <div class="status-icon">
              <el-icon v-if="item.status === 'completed'"><Check /></el-icon>
              <el-icon v-else-if="item.status === 'running'"><Loading /></el-icon>
              <el-icon v-else><Clock /></el-icon>
            </div>
            <div class="status-info">
              <div class="status-title">{{ item.name }}</div>
              <div class="status-progress">
                <el-progress 
                  :percentage="item.progress" 
                  :status="item.status === 'completed' ? 'success' : 'primary'"
                  :stroke-width="8"
                />
                <span class="progress-text">{{ item.progressText }}</span>
              </div>
              <div class="status-details">
                <span>目标: {{ item.target }}</span>
                <span>{{ item.timeLabel }}: {{ item.time }}</span>
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
import { 
  VideoPlay, 
  Refresh, 
  Download, 
  DataBoard, 
  TrendCharts, 
  Trophy, 
  Aim, 
  Check, 
  Loading, 
  Clock, 
  ArrowDown 
} from '@element-plus/icons-vue'
import * as echarts from 'echarts'

// 图表引用
const topologyChartRef = ref(null)
const trendChartRef = ref(null)

// 图表实例
let topologyChart = null
let trendChart = null

// 战术拓扑引用次数统计数据
const topologyData = ref([
  { name: '电力配电系统', value: 35 },
  { name: '装备制造生产线', value: 28 },
  { name: '航电综合测试', value: 22 },
  { name: '无人机集群', value: 18 },
  { name: '卫星载荷控制', value: 15 },
  { name: '机车信号控制', value: 12 },
  { name: '工业控制系统', value: 10 },
  { name: '智能电网', value: 8 }
])

// 推演成功率趋势数据（近30天）
const trendData = ref([
  { date: '05-01', rate: 85 },
  { date: '05-02', rate: 87 },
  { date: '05-03', rate: 89 },
  { date: '05-04', rate: 86 },
  { date: '05-05', rate: 88 },
  { date: '05-06', rate: 90 },
  { date: '05-07', rate: 92 },
  { date: '05-08', rate: 89 },
  { date: '05-09', rate: 91 },
  { date: '05-10', rate: 93 },
  { date: '05-11', rate: 88 },
  { date: '05-12', rate: 90 },
  { date: '05-13', rate: 92 },
  { date: '05-14', rate: 94 },
  { date: '05-15', rate: 91 },
  { date: '05-16', rate: 89 },
  { date: '05-17', rate: 92 },
  { date: '05-18', rate: 95 },
  { date: '05-19', rate: 93 },
  { date: '05-20', rate: 96 },
  { date: '05-21', rate: 94 },
  { date: '05-22', rate: 91 },
  { date: '05-23', rate: 93 },
  { date: '05-24', rate: 95 },
  { date: '05-25', rate: 97 },
  { date: '05-26', rate: 94 },
  { date: '05-27', rate: 96 },
  { date: '05-28', rate: 98 },
  { date: '05-29', rate: 95 },
  { date: '05-30', rate: 97 }
])

// 推演次数排行榜数据
const simulationRanking = ref([
  {
    name: '应急响应演练',
    topology: '装备制造生产线',
    successRate: 98,
    count: 42
  },
  {
    name: '渗透测试方案A',
    topology: '电力配电系统',
    successRate: 92,
    count: 28
  },
  {
    name: '航电系统防御演练',
    topology: '航电综合测试',
    successRate: 87,
    count: 15
  },
  {
    name: '无人机集群测试',
    topology: '无人机集群拓扑',
    successRate: 85,
    count: 12
  },
  {
    name: '机车系统综合推演',
    topology: '机车信号控制',
    successRate: 75,
    count: 3
  }
])

// 拓扑使用频率排行数据
const topologyRanking = ref([
  {
    name: '电力配电系统拓扑',
    devices: 6,
    connections: 6,
    count: 35
  },
  {
    name: '装备制造生产线拓扑',
    devices: 6,
    connections: 6,
    count: 28
  },
  {
    name: '航电综合测试拓扑',
    devices: 6,
    connections: 6,
    count: 22
  },
  {
    name: '无人机集群拓扑',
    devices: 7,
    connections: 7,
    count: 18
  },
  {
    name: '卫星载荷控制拓扑',
    devices: 6,
    connections: 6,
    count: 15
  }
])

// 当前推演状态数据
const currentSimulations = ref([
  {
    name: '渗透测试方案A',
    status: 'completed',
    progress: 100,
    progressText: '已完成',
    target: '电力配电系统',
    timeLabel: '开始时间',
    time: '14:32:18'
  },
  {
    name: '应急响应演练',
    status: 'completed',
    progress: 100,
    progressText: '步骤 4/4 (100%)',
    target: '装备制造生产线',
    timeLabel: '完成时间',
    time: '14:15:42'
  },
  {
    name: '航电系统防御演练',
    status: 'completed',
    progress: 100,
    progressText: '已完成',
    target: '航电综合测试',
    timeLabel: '预计开始',
    time: '15:00:00'
  }
])

// 初始化战术拓扑引用次数统计图表
const initTopologyChart = () => {
  if (topologyChartRef.value) {
    topologyChart = echarts.init(topologyChartRef.value)
    
    const option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: topologyData.value.map(item => item.name),
        axisLabel: {
          rotate: 45,
          fontSize: 10
        }
      },
      yAxis: {
        type: 'value',
        name: '引用次数'
      },
      series: [
        {
          name: '引用次数',
          type: 'bar',
          data: topologyData.value.map(item => item.value),
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#83bff6' },
              { offset: 0.5, color: '#188df0' },
              { offset: 1, color: '#188df0' }
            ])
          },
          emphasis: {
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#2378f7' },
                { offset: 0.7, color: '#2378f7' },
                { offset: 1, color: '#83bff6' }
              ])
            }
          }
        }
      ]
    }
    
    topologyChart.setOption(option)
  }
}

// 初始化推演成功率趋势图表
const initTrendChart = () => {
  if (trendChartRef.value) {
    trendChart = echarts.init(trendChartRef.value)
    
    const option = {
      tooltip: {
        trigger: 'axis',
        formatter: function(params) {
          return `${params[0].name}<br/>成功率: ${params[0].value}%`
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: trendData.value.map(item => item.date),
        boundaryGap: false
      },
      yAxis: {
        type: 'value',
        name: '成功率(%)',
        min: 80,
        max: 100
      },
      series: [
        {
          name: '成功率',
          type: 'line',
          data: trendData.value.map(item => item.rate),
          smooth: true,
          lineStyle: {
            color: '#67c23a',
            width: 3
          },
          itemStyle: {
            color: '#67c23a'
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(103, 194, 58, 0.3)' },
              { offset: 1, color: 'rgba(103, 194, 58, 0.1)' }
            ])
          }
        }
      ]
    }
    
    trendChart.setOption(option)
  }
}

// 监听窗口大小变化，重新调整图表大小
const handleResize = () => {
  if (topologyChart) {
    topologyChart.resize()
  }
  if (trendChart) {
    trendChart.resize()
  }
}

onMounted(async () => {
  console.log('战术方案推演页面已加载')
  
  // 等待DOM更新后初始化图表
  await nextTick()
  initTopologyChart()
  initTrendChart()
  
  // 监听窗口大小变化
  window.addEventListener('resize', handleResize)
})

// 组件卸载时清理事件监听
onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
  if (topologyChart) {
    topologyChart.dispose()
  }
  if (trendChart) {
    trendChart.dispose()
  }
})
</script>

<style lang="scss" scoped>
.simulation-container {
  min-height: calc(100vh - 50px);
}
  
  .header-left {
    .page-title {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 0;
      color: var(--text-color);
      font-size: 28px;
      font-weight: 600;
      
      .el-icon {
        font-size: 24px;
        color: var(--text-color);
      }
    }
  }
  
  .header-actions {
    display: flex;
    gap: 12px;
  }


.summary-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 30px;
  
  .summary-card {
    background: var(--card-bg);
    border: var(--card-border);
    border-radius: 8px;
    padding: 20px;
    
    .card-content {
      text-align: center;
      
      .card-value {
        font-size: 32px;
        font-weight: bold;
        color: var(--el-color-primary);
        line-height: 1;
        margin-bottom: 8px;
      }
      
      .card-label {
        font-size: 14px;
        color: var(--text-color-secondary);
      }
    }
  }
}

.chart-section {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 30px;
  
  .chart-card {
    background: var(--card-bg);
    border: var(--card-border);
    border-radius: 8px;
    padding: 20px;
    
    .chart-header {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 20px;
      font-weight: 600;
      color: var(--text-color);
      
      .el-icon {
        font-size: 18px;
        color: var(--el-color-primary);
      }
    }
    
    .chart-content {
      .chart-container {
        height: 300px;
        width: 100%;
      }
    }
  }
}

.ranking-section {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 30px;
  
  .ranking-card {
    background: var(--card-bg);
    border: var(--card-border);
    border-radius: 8px;
    padding: 20px;
    
    .ranking-header {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 20px;
      font-weight: 600;
      color: var(--text-color);
      
      .el-icon {
        font-size: 18px;
        color: var(--el-color-primary);
      }
    }
    
    .ranking-content {
      .ranking-item {
        display: flex;
        align-items: center;
        padding: 12px 0;
        border-bottom: 1px solid var(--el-border-color-lighter);
        
        &:last-child {
          border-bottom: none;
        }
        
        .rank-number {
          width: 24px;
          height: 24px;
          border-radius: 50%;
          background: var(--el-color-primary);
          color: white;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 12px;
          font-weight: bold;
          margin-right: 12px;
        }
        
        .item-info {
          flex: 1;
          
          .item-title {
            font-weight: 600;
            color: var(--text-color);
            margin-bottom: 4px;
          }
          
          .item-subtitle {
            font-size: 12px;
            color: var(--text-color-secondary);
          }
        }
        
        .item-count {
          font-weight: 600;
          color: var(--el-color-primary);
          font-size: 14px;
        }
      }
    }
  }
}

.status-section {
  .status-card {
    background: var(--card-bg);
    border: var(--card-border);
    
    .status-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: 600;
      color: var(--text-color);
      
      .status-controls {
        display: flex;
        gap: 8px;
      }
    }
    
    .status-content {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      
      .status-item {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 16px;
        background: var(--el-fill-color-lighter);
        border-radius: 8px;
        
        .status-icon {
          width: 32px;
          height: 32px;
          border-radius: 50%;
          background: var(--el-color-success);
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
          
          .el-icon {
            color: white;
            font-size: 16px;
          }
        }
        
        .status-info {
          flex: 1;
          
          .status-title {
            font-weight: 600;
            color: var(--text-color);
            margin-bottom: 8px;
          }
          
          .status-progress {
            margin-bottom: 8px;
            
            .progress-text {
              font-size: 12px;
              color: var(--text-color-secondary);
              margin-left: 8px;
            }
          }
          
          .status-details {
            display: flex;
            flex-direction: column;
            gap: 4px;
            font-size: 12px;
            color: var(--text-color-secondary);
          }
        }
      }
    }
  }
}

// 响应式适配
@media (max-width: 1200px) {
  .summary-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .chart-section,
  .ranking-section {
    grid-template-columns: 1fr;
  }
  
  .status-content {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .summary-cards {
    grid-template-columns: 1fr;
  }
  
  .page-header {
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
  }
}
</style> 